@font-face {font-family: "lato";src: url("../font/LatoLight.ttf") format("truetype");}
@font-face {font-family: "latobold";src: url("../font/Lato-Bold.ttf") format("truetype");}
@font-face {font-family: "buenard";src: url("../font/Buenard-Regular.ttf") format("truetype");}

header{height: 100px;}
section#wrapper{overflow: hidden;}
section#content .container{max-width: none;}
h2.title{text-transform: uppercase;font-weight: bold;color:#a1624c;font-family:'latobold';letter-spacing: 5px;font-size:1.2rem;}
h2.title:after{display: block;    content:"";background :url('../img/vague-terracota.png') no-repeat;background-position: center;background-size: cover;    margin: 0 auto;width: 60px;height: 10px;margin-top:.5rem;}

/* MENU */
#menu{height: 100px;position: fixed; background: white; z-index: 100;}
#menu .title{text-transform: uppercase; color:black; font-family: "lato";letter-spacing: 4px;font-size: .7rem;}
#menu .logo{background: url('../img/logo.png') no-repeat;background-position: top;background-size: cover;height: 90px;width: 220px;margin: 0 3rem;margin-top: 10px;}
/* SLIDER */
section#main .header{background: url('../img/home-mobile.png') no-repeat;background-position: center;background-size: cover;height: calc(100vh - 90px);}
section#main .header .title_container h1{color: white;font-family: "lato";letter-spacing: 5px;font-size: 1.2rem;text-align: center;line-height: 2rem;}
section#main .header .title_container:after{content:"";background :url('../img/vague-blanche.png') no-repeat;background-position: center;background-size: cover;margin: 0 auto;width: 60px;height: 10px;margin-top: 1.5rem;}

/* BLOC STORE */
#store .family{background: url('../img/photo.png') no-repeat;background-position: center;background-size: contain;width: 100%;height: 100%;}
#store .store_container .citation{padding: 0 2rem;}
#store .store_container .citation,
#store .store_container .fermeture-citation{font-family: "buenard";font-size: 1.3rem;}
#store .store_container .text{text-align: justify;font-family: 'lato';}
#store .store_container .text:nth-child(1){padding: 1.5rem;}
#store .store_container .text p{width: 90%;margin: 0 auto;margin-bottom: 15px;}
#store .store_container:after{content:"";background :url('../img/vague-blanche.png') no-repeat;background-position: center;background-size: cover;margin: 0 auto;width: 60px;height: 10px;}
#store .store_container .fermeture-citation{color: #a1624c;}
#store .store_container .image{min-height: 510px;}
#store .store_container .fermeture-citation{padding-top: 30px;}
#store .store_container .signature{display:block;width: 130px;height: 45px;margin: 0 auto;margin-top: 10px;background: url('../img/signature.png') no-repeat;background-position: center;background-size: cover;}

/* BLOC ADDRESS */
#address:before{display: block;content:"";background :url('../img/chateau-blanc.png') no-repeat;background-position: center;background-size: cover;margin: 0 auto;width: 120px;height: 60px;}
#address{background: url('../img/fond.png') no-repeat;background-position: center;background-size: cover;}
#address .address_title span.title{color: white;}
#address .address_title span.title:after{display:none;}
#address .address_container{font-family: 'lato';font-size: .9rem;}
#address .timetables{color: #a1624c;font-family: 'buenard';font-size: 1.3rem;letter-spacing: 1px;}

/* BLOC BRAND */
/* BOUTON CONTACT */
#contact button{margin-top: -8rem;height: 4rem;border-radius: 0;padding: 0 4rem;background-color:#a1624c;border: none;font-family: "buenard";letter-spacing: 1px;}
#brand{margin-top: 6rem;}
#brand .brand_container{position:relative;overflow: hidden;width:100vw;margin:0 auto;}

#brand .brand_container .brand_slider_container{
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    max-width: 100vw;
}
#brand .brand_container .brand_slider_container .brand_slider{
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
}

#brand .brand_container span.control_prev, 
#brand .brand_container span.control_next {
    position: absolute;
    top: 40%;
    z-index: 10;
    display: block;
    font-size: 18px;
    cursor: pointer;
  }

  span.control_prev:hover, span.control_next:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;
  }
  
  span.control_prev {
    content:"";
    background :url('../img/fleche-prev.png') no-repeat;
    background-position: center;
    background-size: cover;
    width: 35px;
    height: 20px;
  }
  
  span.control_next {
    right: 0;
    content:"";
    background :url('../img/fleche-next.png') no-repeat;
    background-position: center;
    background-size: cover;
    width: 35px;
    height: 20px;    
  }
  
.brand_container .card-deck{flex-direction:row;}
.brand_container .card-deck .card{width: 200px;max-width: 200px;min-width: 200px;height: 200px;min-height: 200px;max-height: 200px;margin: 20px 20px;border-radius: 0;border: none;}
.brand_container .card-deck .card .card-body.ralphlauren{background :url('../img/ralphlauren.png') no-repeat;background-position: center;background-size: cover;}
.brand_container .card-deck .card .card-body.bobbies{background :url('../img/bobbies.png') no-repeat;background-position: center;background-size: cover;}
.brand_container .card-deck .card .card-body.gant{background :url('../img/gant.png') no-repeat;background-position: center;background-size: cover;}
.brand_container .card-deck .card .card-body.pom{background :url('../img/pom.png') no-repeat;background-position: center;background-size: cover;}
.brand_container .card-deck .card .card-body.acquaverde{background :url('../img/acquaverde.png') no-repeat;background-position: center;background-size: cover;}
.brand_container .card-deck .card .card-body.momoni{background :url('../img/momoni.png') no-repeat;background-position: center;background-size: cover;}
.brand_container .card-deck .card .card-body.humility{background :url('../img/humility.png') no-repeat;background-position: center;background-size: cover;}

.brand_container .card-deck .card .card-body.absolut-cashmere{background :url('../img/absolut-cashmere.png') no-repeat;background-position: center;background-size: cover;}
.brand_container .card-deck .card .card-body.albertine{background :url('../img/albertine.png') no-repeat;background-position: center;background-size: cover;}
.brand_container .card-deck .card .card-body.chateau-blanc{background :url('../img/chateau-blanc.png') no-repeat;background-position: center;background-size: cover;}
.brand_container .card-deck .card .card-body.chloe{background :url('../img/chloe.png') no-repeat;background-position: center;background-size: cover;}
.brand_container .card-deck .card .card-body.lemonjelly{background :url('../img/lemonjelly.png') no-repeat;background-position: center;background-size: cover;}
.brand_container .card-deck .card .card-body.napapijri{background :url('../img/napapijri.png') no-repeat;background-position: center;background-size: cover;}
.brand_container .card-deck .card .card-body.yuj{background :url('../img/yuj.png') no-repeat;background-position: center;background-size: cover;}

/* BLOC NEWSLETTER */
#newsletter .surprises{text-transform: uppercase;font-family: "lato";letter-spacing: 3px;font-size: .8rem;}
#newsletter .inscription{font-family: "buenard";letter-spacing: 2px;font-size: 1.7rem;color: #a1624c;margin-top:.5rem;}
#newsletter .newsletter_input_container{width: 80%;margin: 0 auto;margin-top:4rem;position: relative;}
#newsletter .newsletter_input_container input#newslettermail{border-radius: 0;font-family: 'lato';padding: 0.85rem;letter-spacing: 1px;font-size: .7rem;color: black;position: relative;width: 100%;}
#newsletter .newsletter_input_container input#newslettersubmit{position: absolute;top: 0;right: 0.5rem;padding-right: 5rem;height: 100%;width: 1.5rem;font-size: .7rem;text-transform: uppercase;background-color: transparent;border: none;color: #a1624c;letter-spacing: 1px;}

/* BLOC SN */
#social_network .subtitle{text-transform: uppercase;font-family: "lato";letter-spacing: 3px;font-size: .8rem;}
#social_network .social_network .instagram{background-image: url('../img/picto-insta.png');height: 50px;width: 50px;background-position: center;background-repeat: no-repeat;background-size: cover;}
#social_network .social_network .facebook{background-image: url('../img/picto-facebook.png');height: 50px;width: 50px;background-position: center;background-repeat: no-repeat;background-size: cover;}

/* BLOC FOOTER */
#footer{height: 60px;background-color: #a1624c;font-family: "lato";font-size: .75rem;letter-spacing: 1px;flex-direction:column;line-height: 1.3rem;}
#footer span{color: white;}
#footer span.street:after{content:"";background :url('../img/vague-blanche.png') no-repeat;background-position: center;background-size: cover;margin: 0 5px;width: 20px;height: 7px;display: inline-block;}

@media (min-width: 767px){
    section#main .header{background: url('../img/home-desktop.png') no-repeat;background-position: center;background-size: cover;height: calc(100vh - 60px);}
    .brand_container .card-deck{justify-content: center;}
    .brand_container .card-deck .card{margin: 20px;}
    #brand .brand_container{width:70rem}
    #brand .brand_container .brand_slider_container{
        overflow-x: unset;
        overflow-y: unset;
        max-width: none;
        width:70rem;    
    }
    #brand .brand_container .brand_slider_container .brand_slider{width:70rem;}
    #store .store_container .image{padding-right: 5%;padding-left: 15%;}
    #store .store_container .image .family{padding-top: 100%;}
    #store .store_container .text{line-height: 1.8rem;padding-right: 12.5%;padding-left: 0 !important;}    
    #store .store_container .text p{width: 85%;margin-right: auto;margin-left:0;}
    #store .store_container .fermeture-citation{padding-bottom: 30px;}
    #newsletter .newsletter_input_container{width: 25%;}
    #footer{flex-direction:row;}
    #footer span.street:after,
    #footer span.zipcode:after{content:"";background :url('../img/vague-blanche.png') no-repeat;background-position: center;background-size: cover;margin: 0 5px;width: 30px;height: 7px;display: inline-block;}
}